<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 画坊 - 图片结果</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f0f2f5;
            color: #202020;
        }
        
        .t-status-bar {
            height: 44px;
            background-color: #ffffff;
            width: 100%;
        }
        
        .t-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 24px;
            height: 44px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s, opacity 0.2s;
        }
        
        .t-button-primary {
            background-color: #0052d9; /* TDesign primary blue */
            color: white;
        }
        
        .t-button-primary:active {
            opacity: 0.9;
        }
        
        .t-button-secondary {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #dcdcdc;
        }
        
        .t-button-secondary:active {
            background-color: #e6e6e6;
        }
        
        .prompt-text {
            padding: 12px 16px;
            background-color: #f3f3f3;
            border-radius: 8px;
            font-size: 14px;
            color: #666;
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 16px;
        }
        
        .result-image {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .back-button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
    <!-- Status Bar -->
    <div class="t-status-bar flex items-center px-4">
        <div class="back-button mr-1">
            <i class="ri-arrow-left-s-line text-lg"></i>
        </div>
        <div class="text-base font-medium">图片结果</div>
    </div>
    
    <!-- Content -->
    <div class="p-5">
        <div class="text-base font-medium mb-2">你的提示词:</div>
        <div class="prompt-text">
            神秘森林里的星空小屋，有人在门口点着灯笼，梦幻风格
        </div>
        
        <div class="bg-white p-4 rounded-xl shadow-sm mb-4">
            <img src="https://picsum.photos/seed/ai-result/600/600" alt="Generated Image" class="result-image">
        </div>
        
        <div class="flex space-x-3 mt-6">
            <button class="t-button t-button-secondary flex-1">
                <i class="ri-refresh-line mr-2"></i>
                重新生成
            </button>
            
            <button class="t-button t-button-primary flex-1">
                <i class="ri-share-line mr-2"></i>
                发布
            </button>
        </div>
        
        <div class="mt-6 text-center text-sm text-gray-500">
            将图片发布到"首页"后，其他用户可以看到你的创作
        </div>
    </div>
</body>
</html> 